<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
    <head>
          <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
          <title>
            用户详情页
          </title>

    </head>
        <body style="width: 100%;height: 100%; margin-top: 0px">
        <script src="/approval/static/js/jquery-3.4.1.min.js"></script>
        <script src="/approval/static/js/vue-2.4.0.js"></script>
        <link type="text/css" rel="stylesheet" href="/approval/static/css/bootstrap.min.css"/>
        <script>
            var getStaff=function (account){
                var res=null;
                $.ajax({
                    url:"/approval//staff/getone?account="+account,
                    type:"GET",
                    async:false,
                    dataType:"json",
                    success:function (response){

                        res=response;
                    }
                })
                return res;
            }
            $(document).ready(function (){

                var account=sessionStorage.getItem("account");
                var staff=getStaff(account);
                var app=new Vue({
                    el:"#app",
                    data:{
                        account:staff.staffno,
                        name:staff.staffname,
                        phone:staff.phone,
                        detail:staff.detail,
                        department:staff.departname,
                        station:staff.stationname
                    }
                })

            })
        </script>
        <div style="width: 40%; margin-left: 30%;height: 100%;" id="app">
            <div class="panel panel-default" style="width: 100%;height: 100%;margin-top: 50px;">
                <div class="panel-heading">
                    <h2 class="panel-title text-center" ><strong>员工详细信息</strong></h2>
                </div>
                <div class="panel-body" style="padding: 0px;height: 100%;width: 100%">
                    <div class="list-group ">
                    <button type="button" class="list-group-item  " ><strong>员工账号:</strong>{{account}}</button>
                        <br/>
                    <button type="button" class="list-group-item text-center"><strong>员工姓名:</strong>{{name}}</button>
                        <br/>
                    <button type="button" class="list-group-item text-center"><strong>员工手机号:</strong>{{phone}}</button>
                        <br/>
                    <button type="button" class="list-group-item text-center">
                        <h4 class="list-group-item-heading"><strong>员工详细信息</strong></h4>
                        <p class="list-group-item-text">{{detail}}</p></button>
                        <br/>
                    <button type="button" class="list-group-item text-center"><strong>员工所属部门:</strong>{{department}}</button>
                        <br/>
                    <button type="button" class="list-group-item text-center"><strong>员工职位:</strong>{{station}}</button>
                        <br/>
                </div>
                </div>
            </div>

          </div>
    </body>
</html>